<template>
  <div class="banner">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item,index) in bannerList" :key="index">
        <img class="banner-img" :src="item.imgSrc" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data () {
    return {
      bannerList: [
        {
          imgSrc: require('@/assets/banner/banner-1.jpg'),
          imgName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-2.jpg'),
          imgName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-3.png'),
          imgName: ''
        },
        {
          imgSrc: require('@/assets/banner/banner-4.jpg'),
          imgName: ''
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.banner {
  width: 100%;
  height: 800px;
  .el-carousel {
    height: 100%;
    /deep/.el-carousel__container {
      height: 100%;
      .banner-img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
